<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>ATM</title>

<style type="text/css">
	#main {
		border: 1px solid; 
		width:70%;
		height:600px;
		background-color:#C0C0C0;
		margin: 0 auto;
	}
	#display{
		border: 1px solid;
		display: inline-block;
		width:93%;
		height:200px;
		background-color:rgba(105, 199, 76, 0.952);
		margin:25px;
		color:white;}
	#receipt{
		float: left;
		width:35%;
		height:320px;
		margin-top: 10px;
		background-color:rgb(192, 243, 177);
		}

	#btn{
		width:80%;
		height:30px;
		margin-top:10px;
		font-size:large;
	}
	#area{
		width:95%;
	}
	.number{
		width:30%;
		height:25px;
		font-size:large;
		margin-top:10px;
	}
	.command{
		width:40%;
		height:30px;
		font-size:large;
		margin-top:10px;
	}
	#panel{
		border: 0px solid;
		width:95%;
		height:40px;
		margin-top:25px;
		margin-left:35px;
		font-size:large;
		/*background-color:#7A82FF;*/
		float:left;
	}
	#left_panel{
		border: 1px solid;
		width:30%;
		height:40px;
		margin-top:0px;
		display: inline-block;
		background-color:#7A82FF;
	}
	#right_panel{
		border: 1px solid;
		width:65%;
		height:40px;
		display: inline-block;
		background-color:#7A82FF;
	}
	#log{
		border: 1px solid;
		width:20%;
		height:30px;
		margin-top:0px;
		font-size:small;
		display: inline;
	}
	.button{
		width:80px;
		height:40px;
	}
    .number1{
		width:100%;
		height:60px;
		font-size:45px;
		margin: 0 auto;
		margin-bottom: 5px;
		margin-top: 18px;
		background-color:rgba(180, 224, 245, 0.705);
		color: rgb(103, 182, 79);		
	}

   
#box1{	
    float: left;
    width:27%;
    height:300px;
    margin-left: 17px;
    margin-top: 10px;
    margin-right: 12px;
    background-color:rgb(192, 243, 177);
    padding: 10px;
    }

#box2{	
    float: left;
    width:29%;
    height:320px;
    margin-right: 15px;
    margin-top: 10px;
    margin-left: 12px;
    background-color:rgb(192, 243, 177);
    }

#box3{	
    float: left;
    width:95%;
    height:60px;
    margin-right: 15px;
    margin-top: 10px;
    margin-left: 8px;
    background-color:rgb(167, 167, 167);
    }
    
#box4{	
    float: left;
    width:95%;
    height:230px;
    margin-right: 15px;
    margin-top: 10px;
    margin-left: 8px;
    background-color:rgb(190, 228, 178);
    }

#box5{	
    float: left;
    width:95%;
    height:40px;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 8px;
    background-color:rgba(90, 90, 90, 0.945);
    border-radius: 10px;
    }

#box6{	
    float: left;
    width:80%;
    height:10px;
    margin-right: 10px;
    margin-top: 15px;
    margin-left: 28px;
    background-color:rgb(71, 71, 71);
    border-radius: 10px;
    }

#box7{	
        float: left;
        width:80%;
        height:200px;
        margin-right: 10px;
        margin-top: 15px;
        margin-left: 28px;
        background-color:rgb(252, 252, 252);
        border-radius: 5px;
        }

 #box8{	
            float: left;
            width:90%;
            height:180px;
            margin:10px;
            background-color:rgba(102, 101, 101, 0.884)
            }

 #box9{	
            float: left;
            width:90%;
            height:80px;
            margin-top: 50px;
            margin-right: 10px;
            margin-left: 10px;
            background-color:rgb(252, 252, 252)
            } 
 #d1{
            width:50px;
            height:50px;
            margin-top: 20px;
            margin-left: 30px;
            border:2px solid rgb(243, 7, 7);
            border-radius:50%;
            box-shadow:0px 0px 20px rgb(235, 99, 99);
            float: left;           
            }
 #d2{
            width:50px;
            height:50px;
            margin-top: 20px;
            margin-left: 30px;
            border:2px solid rgb(15, 209, 63);
            border-radius:50%;
            box-shadow:0px 0px 20px rgb(115, 236, 84);
            float: left;           
            }
  .button1{
		width:20px;
		height:10px;
	}

	div:focus {
    background-color:rgb(13, 194, 226);
}
 .number2{
		width:100%;
		height:60px;
		font-size:15px;
		margin: 0 auto;
		margin-bottom: 5px;
		margin-top: 12px;
		
	}	
</style>
</head>

<body bgcolor="#ffffff">

<div><center class="number1">欢迎使用ATM</center></div>

<div id="main">
	
	<div id="display">
	</div>

<div id="box1">

    <textarea rows="20" cols="20" id="area">
			
	</textarea></div>

	<div id="receipt">
		<div id="box3">
				<div id="box5">
					<div id="box6"  tabindex="2"></div>
				</div>
			</div>
			<div id="box4">
		<center>
		<button type="button" id="b1" class="number" value="1" onclick="readNum(this);">1</button> 
		<button type="button" id="b2" class="number" value="2" onclick="readNum(this);">2</button> 
		<button type="button" id="b3" class="number" value="3" onclick="readNum(this);">3</button> 
		<button type="button" id="b4" class="number" value="4" onclick="readNum(this);">4</button> 
		<button type="button" id="b5" class="number" value="5" onclick="readNum(this);">5</button> 
		<button type="button" id="b6" class="number" value="6" onclick="readNum(this);">6</button> 
		<button type="button" id="b7" class="number" value="7" onclick="readNum(this);">7</button> 
		<button type="button" id="b8" class="number" value="8" onclick="readNum(this);">8</button> 
		<button type="button" id="b9" class="number" value="9" onclick="readNum(this);">9</button> 
		<button type="button" id="b0" class="number" value="0" onclick="readNum(this);">0</button>
		</center>
		<br/> 
		<center>
		<button type="button" id="comfirm" class="command" onclick="submit();">确认</button> 
		<button type="button" id="cancel" class="command" >取消</button> 
		</center>
	</div>
	</div>
	
    <div id="box2">
	  <div id="box7">
		  <div id="box8">
			  <div id="box9">
                  <div id="d1"><center class="number2">已关机</center></div>
			
			      <div id="d2"><center class="number2">已开机</center></div>
			
              </div>
		  </div>
	  </div>
	<!--div id="panel">
		<div id="left_panel">
		</div>
		<div id="right_panel">
			<button type="button" id="log">显示日志</button> 
		</div>
	</div-->
	<div id="panel">
	<!-- <button type="button" class="button" id="on" onclick="turnon();">开机</button> 
	<button type="button" class="button" id="off">关机</button>-->
	<button type="button" class="button" id="switch">关机</button>
	<button type="button" class="button" id="card">插卡</button>
	</div>
	
</div>
</div>
</body>
</html>